<template>
  <div style="width: 90%; margin:20px auto 0">
    <selectEle @gethouse="getList" />
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
        align="center"
      />
      <el-table-column prop="gender" label="性别" width="100" align="center" />
      <el-table-column prop="phone" width="180" label="电话" align="center" />
      <el-table-column prop="card" width="180" label="证件号" align="center" />
      <el-table-column label="房屋信息" align="center">
        <template slot-scope="scope">
          <template v-for="item in scope.row.room">
            {{ item.building }}{{ item.room }}
          </template>
        </template>
        <!-- <el-table-column prop="room[0].building" label="楼栋" width="120" ></el-table-column>
        <el-table-column prop="room[0].room" label="户号" width="120" ></el-table-column> -->
      </el-table-column>
      <el-table-column width="180" label="账户状态" align="center">
        <template slot-scope="{row}">
          <span v-if="row.status">正常</span>
          <span v-else style="color:red">已冻结</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200" align="center">
        <template slot-scope="scope">
          <el-button
          v-if="scope.row.status"
            :key='scope.row._id'
            type="danger"
            plain
            :disabled="!scope.row.status"
            size="small"
            @click="change(scope.row._id)"
            >冻结账户</el-button
          >
          <el-button
          v-else
            :key='scope.row._id'
            type="info"
            plain
            disabled
            size="small"
            >账户已冻结</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        layout="prev, pager, next"
        :total="pages.count"
        :page-size="pages.limit"
        @current-change="changePage"
      />
    </div>
  </div>
</template>

<script>
import selectEle from "./components/select";
export default {
  components: { selectEle },
  data() {
    return {};
  },
  computed: {
    tableData() {
      return this.$store.state.people.list;
    },
    pages() {
      return this.$store.state.people.pages;
    },
  },
  mounted() {
    this.$store.dispatch("people/getInfo");
  },
  methods: {
    getList(val) {
      let filter = {};
      if (val !== "all") {
        filter = { room: val };
      }
      let obj = Object.assign({}, this.pages, { data: filter });
      this.$store.dispatch("people/getInfo", obj);
    },
    changePage(val) {
      let obj = Object.assign({}, this.pages, { page: val });
      this.$store.dispatch("people/getInfo", obj);
    },
    change(_id) {
      this.$confirm("此操作将冻结该账户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const data = { _id, status: false };
          this.$store
            .dispatch("people/change", data)
            .then((res) => {
              console.log(res);
              this.$message({
                type: "success",
                message: "冻结成功!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "冻结失败！",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消冻结该账户",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
